{% stylesheet %}
  .block_collection_waterfall .block_collection_product ul {
    display: grid;
    grid-row-gap: 30px;
    grid-column-gap: 30px;
    grid-template-columns: repeat(4, calc(25% - 22.5px));
  }

  .block_collection_waterfall .block_collection_product li {
    list-style-type: none;
    line-height: 1.4;
    text-align: center;
  }

  .block_collection_waterfall .block_collection_product .product_pic {
    margin-bottom: 18px;
    position: relative;
  }

  .block_collection_waterfall .block_collection_product .soldout {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 50px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 14px;
  }

  .block_collection_waterfall .block_collection_product .product_pic .product_img {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
  }

  .block_collection_waterfall .block_collection_product .product_pic img {
    max-width: 100%;
  }

  .block_collection_waterfall .block_collection_product .block_product_name {
    margin-bottom: 4px;
    line-height: 1.5;
  }

  .block_collection_waterfall .block_collection_product .product_price {
    font-weight: bold;
  }

  .block_collection_waterfall .block_collection_product .product_oldprice {
    color: #888;
    text-decoration: line-through;
    margin-left: 5px;
    display: inline-block;
    font-weight: normal;
  }

  .block_collection_waterfall {
    margin: 0 auto;
    gap: 30px;
  }

  .block_collection_waterfall.waterfall-fill {
    width: 100%;
    max-width: 100% !important;
  }

  .block_collection_waterfall .fall-item img {
    width: 100%;
    height: auto;
    vertical-align: top;
  }

  .block_collection_waterfall .fall-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
  }

  .block_collection_waterfall .fall-item .block_product_name {
    margin-bottom: 10px;
    line-height: 1.5;
  }

  .block_collection_waterfall .fall-item .fall-item-number {
    font-size: 14px;
    font-weight: 400;
    margin-top: 10px;
    color: var(--main_color);
  }

  .block_collection_waterfall .fall-item .product_price {
    text-align: center;
  }

  @media(max-width: 767px) {
    .mo-waterfall-warp .mo-waterfall-column {
      grid-row-gap: 30px;
    }
  }
{% endstylesheet %}
{% assign global = theme_config.global %}
{% if section.settings.collection_id.id %}
  {% get_collection collections_id={ section.settings.collection_id.id } %}
  {% assign collection = collection %}
{% endif %}
{% assign blockId = block_id | default : section.block_id %}



<div id="block_collection_waterfall-{{ blockId }}" class="container_wrapper block_collection_waterfall {% if section.settings.is_fill %}full_container_wrapper{% endif %}">
  {% include 'block_title', title:section.settings.title , detail:section.settings.detail %}

  <div class="mo-waterfall-warp block_collection_product {% if section.settings.is_mobile_name %}show-mobile_name{% endif %}" id='block_product_waterfall-{{ block_id | default : section.block_id  }}'></div>
</div>

{% include 'collection_product_waterfall' %}



<script type="text/javascript">
  (function() {
    const blockId = {{ blockId }}
    const collection_id = '{{ section.settings.collection_id.id | default : "" }}';
    const waterfall = new waterfalls({
      id: `#block_product_waterfall-${blockId}`,
      bottomDistance: 30,
      scrollBottom: scrollBottom,
      renderType: "liquid",
      renderComplete(node) {
        node.find(".product_view").click(quickview);
        {% comment %} window.addLazyImages && addLazyImages(node.find("img[data-src]")); {% endcomment %}
      },
      resizeConfig: [
        {
          min: 0,
          max: 767,
          rowGutter: "15px",
          columnsGutter: "15px",
          columns: "{{ section.settings.mobile_column }}"
        }, {
          min: 768,
          max: 1199,
          rowGutter: "30px",
          columnsGutter: "30px",
          columns: "{{ section.settings.web_column }}"
        }, {
          min: 1200,
          rowGutter: "30px",
          columnsGutter: "30px",
          columns: "{{ section.settings.web_column }}"
        }
      ],
      render(data, callback) {
        engine.registerFilter("money", (val) => formatMoney(val, oemcart_currency));

        engine.parseAndRender($("#omesaas-collection-product-temp").html(), {
          products: data,
          theme_config: themeConfig,
          lang: lang,
          collection_handle: collection_id && "{{ collection.handle }}",
          data_from: "{{ data_from }}",
          collection_product_url: '{{storeConfig.collection_product_url}}'
        }).then(function(liquidHtml) {
          const node = $(liquidHtml);
          window.productSize && window.productSize(node.find(".product_img"))
          callback && callback.call(this, node);
          {% if theme_config.global.product_img_list_type != 0 %}
            renderImgList();
          {% endif %}
        });
      }
    });

    function renderImgList() {
      let productDetail = new omesaasProduct({})
      productDetail.renderProductImgList()
      productDetail = null
    };
    if (! collection_id) {
      waterfall.RenderDefaultData({
        src: "{{ 'empty.png' | public_asset_abs_url }}",

        inventory_policy: 1,
        inventory_quantity: 0,
        inventory_tracking: 0,
        title: "title",
        variant: {
          price: 18.8,
          compare_at_price: 188
        },
        variant_compare_at_price_max: 188,
        variant_compare_at_price_min: 188,
        variant_price_max: 18.8,
        variant_price_min: 18.8
      }, "{{ section.settings.button_text }}");
    }

    let page = 1;
    let isAll = true;
    let maxRequestNumber = "{{ section.settings.count }}";
    let isScrollLoad = false;

    function getCollection() {
      waterfall.showLoad();
      if (maxRequestNumber) {
        maxRequestNumber--;
      }
      moi.ajax({
        url: `/collection/{{ section.settings.collection_id.id }}/products`,
        type: "get",
        data: {
          page: page,
          pagesize: 10
        },
        success: function(ret) {
          if (! ret.code) {
            isScrollLoad = false;
            waterfall.hideLoad();
            waterfall.addStorage(ret.data.list);
            isAll = ret
              .data
              .paginate
              .pageTotal === page
                ? true
                : false;

            if (! maxRequestNumber || isAll) {
              waterfall.showMore("{{ section.settings.button_text }}", `/collections/{{ collection.handle }}`);
            }
          }
        }
      });
    }

    function scrollBottom() {
      if (! isScrollLoad && ! isAll && maxRequestNumber) {
        isScrollLoad = true;
        page++;
        getCollection();
      }
    }
    if (collection_id) {
      getCollection();
    }
  })()
</script>
{% schema %}
{
	"tag": "",
	"class": "block_collection_waterfall",
	"is_global": false,
	"name": {
		"zh_CN": "商品瀑布",
		"en_US": "Product grid"
	},
	"max_blocks": "5",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "专辑",
				"en_US": "Collection"
			}
		},
		{
			"type": "card_collection",
			"label": {
				"zh_CN": "选择专辑",
				"en_US": "Select collection"
			},
			"default": {
				"id": "",
				"title": ""
			},
			"id": "collection_id"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"id": "title",
			"default": "title"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"id": "detail",
			"default": "title"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "宽度铺满",
				"en_US": "Spread the width"
			},
			"id": "is_fill"
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "pc每排数量",
				"en_US": "PC number per row"
			},
			"default": "3",
			"id": "web_column",
			"max": "5",
			"min": "2"
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "移动端每排数量",
				"en_US": "Number of mobile terminals per row"
			},
			"default": "1",
			"id": "mobile_column",
			"max": "3",
			"min": "2"
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "加载次数",
				"en_US": "Number of loads"
			},
			"default": "3",
			"id": "count",
			"max": "5",
			"min": "1"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "查看更多文案",
				"en_US": "Text of view more"
			},
			"id": "button_text"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"collection_id": {
				"id": "",
				"title": ""
			},
			"title": "Collection Waterfall",
			"detail": "",
			"web_column": "4",
			"mobile_column": "2",
			"is_fill": false,
			"is_mobile_name": true,
			"count": "3",
			"button_text": "View More"
		},
		"blocks": []
	},
	"icon": "icon-shangpinpubuliu"
}
{% endschema %}